<template>
	<el-container>
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="groupId" @tab-change="tabChange">
				<el-tab-pane label="费用科目" name="expanseAccount"  :tabActiveName="isComponent=='expanseAccount'"></el-tab-pane>
				<el-tab-pane label="部门预算" name="expanseDeptConfig" :tabActiveName="isComponent=='expanseDeptConfig'"></el-tab-pane>
				<el-tab-pane label="人员预算" name="expanseAccountConfig" :tabActiveName="isComponent=='expanseAccountConfig'"></el-tab-pane>
				<el-tab-pane label="公司预算" name="expanseComConfig" :tabActiveName="isComponent=='expanseComConfig'"></el-tab-pane>
			</el-tabs>
		</el-header>
		<component :is="isComponent"/>
	</el-container>
</template>

<script>
import expanseAccount from './eaccount'
import expanseDeptConfig from './dindex'
import expanseAccountConfig from './aindex'
import expanseComConfig from './cindex'
export default {
	components: {
		expanseAccount,
		expanseDeptConfig,
		expanseAccountConfig,
		expanseComConfig,
	},
	data() {
		return {
			groupId:"expanseAccount",
			isComponent:"expanseAccount"
		}
	},
	methods: {
		tabChange(name){
			this.isComponent = name;
		},
	}
}
</script>

<style>
</style>
